
<div class="icon-panel-content">
  <div class="ui-clickable-icon icon-button" (click)="showIcons($event)">
    <app-info-input-icon [width]="30" [height]="30" [frontColor]="frontColor" [backColor]="backColor" [svgPath]="iconSvgPath"></app-info-input-icon>
  </div>
  <p-colorPicker [(ngModel)]="backColor" [appendTo]="'body'" (onChange)="colorChange()"></p-colorPicker>
  <p-colorPicker [(ngModel)]="frontColor" [appendTo]="'body'" (onChange)="colorChange()"></p-colorPicker>
</div>

<input class="info-title" type="text" i18n-placeholder placeholder="Title" pInputText [(ngModel)]="title"/>
<textarea class="info-text-area" rows="5" pInputTextarea autoResize="true" [(ngModel)]="infoString"></textarea>

<p-overlayPanel #iconPanel [appendTo]="'body'">
  <div class="icon-panel-content">
    <div *ngFor="let icon of iconList" class="ui-clickable-icon icon-button" (click)="chooseIcon(icon)">
      <app-info-input-icon [width]="30" [height]="30" [frontColor]="frontColor" [backColor]="backColor" [svgPath]="iconSvgPathFromIcon(icon)"></app-info-input-icon>
    </div>
  </div>
</p-overlayPanel>
